<template>
  <div class="uploadComponent">
    <div>
      <UPLOAD :dynamicClass="'studyUpload'" :accept="accept" @uploadedBefore="uploadedBefore" @fileDataUploaded="fileDataUploadSuccess" :currNo="currNo"
        :baseFileUrl="'/'+baseFileUrl" :isDisabled="titemState == taskState['studied'] || unShowGroupIcon || isTimeOut" :uploadedFileList="fileList" :drag="true" :taskJson="taskJson" :multiple="multiple" :limit="limit" :title="'格式支持png、jpg、docx、html、js、pdf、zip、mp4等'" :isArchive="isArchive" :userInfo="userInfo" :selectedTutorName="selectedTutorName">
        <template>
          <div v-if="titemState == taskState['studying'] && !unShowGroupIcon">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              <div>格式支持：{{ acceptText }}</div>
              <div>上传数量限制: {{ limit ? limit + '个文件' : '不限制' }}</div>
              <div>文件大小:建议大小不超过60M,系统会定时清理超过60M的文件;文件最大不超过80M</div>
            </div>
          </div>
          <div class="exhibition" v-if="fileList.length">
            <TreeFile
              :fileList="fileList"
              :defaultProps="defaultProps"
              @handleClickNode="handleClickNode"
              @handelDeleteFile="handelDeleteFile"
              :className="'filePageTree'"
              :nodeKey="'id'"
              :showMoreBtn="true"
              :unShowMroeInfo="true"
              :showCopyBtn="isSetLink"
              @remove="remove"
              @decompression="decompression"
              @downLoad="downLoad"
              @newDownLoad="handleNewDownLoad"
              @copy="handlecopy"
              :disabled="titemState == taskState['studied'] || isTimeOut"
              :unShowGroupIcon="unShowGroupIcon"
              :currNo="currNo"
              :isArchive="isArchive"
            />
              <!-- :chooseType="chooseType" -->
              <!-- :titemState="titemState" -->
              <!-- :unShowGroupIcon="unShowGroupIcon" -->
          </div>
          <div v-if="!fileList.length" style="text-align: left; padding: 10px">
            暂无上传的文件
          </div>
        </template>
      </UPLOAD>
    </div>
    <!-- 已上传文件弹出层 -->
    <previewImgVidoeFile
      :showPerview="amplify"
      @close="handelclose"
      :showData="amplifyFile"
      :fileList="fileList"
    />
    <Title v-if="showTitle" :titleData="titleData" />
  </div>
</template>
<script>
const Title = () => import("@/components/title/title");
import { taskState } from "@/util/guidingtextType";
import { location, handelItem, copy } from "@/util/tool";
import { mapState } from "vuex";
const previewImgVidoeFile = () =>
  import("@/components/previewImgVidoeFile/previewImgVidoeFile");
import { Decompression, recursionFilePath } from "@/util/decompression.js";
import { Video } from "@/util/videoUrlFormat";
import TreeFile from "@/components/treeFile/index";
import { Upload } from "@/util/upload.js"
import { deleteFile } from "@/request/folder";
import { directDownload, rangeDownload } from "@/util/download.js"
const UPLOAD = () => import("@/components/upload/index.vue");
let id = 10000
export default {
  components: {
    Title,
    previewImgVidoeFile,
    TreeFile,
    UPLOAD,
  },
  data() {
    return {
      taskState,
      result: null,
      currentShowFile: {
        result: null,
        type: null,
      },
      // sheets: null,
      fileList: [], // 用于视图渲染的已上传文件路径
      saveUseFileList: [], // 保存时使用的已上传的文件路径
      amplify: false, // dialog查看已上传文件详情
      amplifyFile: {}, // 点击已上传的文件数据
      timer: null,
      defaultProps: {
        children: "subFiles",
        label: "fileName",
      },
    };
  },
  props: {
    accept: {
      type: String,
      default: () => ".pka,.txt,.css,.html,.zip,.rar,.jpg,.jpeg,.png,.gif,.bmp,.pdf,.docx,.xls,.xlsx,.pptx,.mp3,.mp4,.mpeg,.wma,.aac,.wav,.js,.doc,.DOC,.CSS,.HTML,.ZIP,.RAR,.JPG,.JPEG,.PNG,.GIF,.BMP,.PDF,.DOCX,.XLS,.XLSX,.MP3,.MP4,.MPEG,.WMA,.AAC,.WAV"
    }, // 文件类型
    acceptText: {
      type: String,
      default: () => 'txt、png、jpg、docx、html、js、pdf、zip、mp4...等'
    },
    courseID: Number, // 课程ID
    currNo: Number,
    taskIndex: String, // 当前任务组、任务、引导文索引值
    thisIndex: Number, // 当前引导文索引
    studyData: Object, // 当前引导文提交的数据
    item: Object, // 当前课程信息引导文的信息
    titem: Object,
    unShowGroupIcon: Boolean, // 控制当前组件是否不可用
    correctStudentSbmJson: Object, //教师评阅界面当前学生的学习数据
    chooseNo: Number, // 学生学修ID
    uploadData: Object,
    titemState: String, // 当前任务的状态
    studentInfo: Object,
    isSetLink: Boolean, // 引导文类型是展示
    multiple: {
      type: Boolean,
      default: () => true
    },
    limit: Number, // 文件最大上传数量
    isTimeOut: Boolean, // 是否超时
    isArchive: Boolean, // 是不是归档任务
    selectedTutorName: String, // 指导教师名字
  },
  created() {
    // 教师评阅页面 格式化学生学习数据
    if (this.correctStudentSbmJson) {
      this.handleShowData(this.correctStudentSbmJson);
    }
    if (this.studyData) {
      // debugger;
      this.handleShowData(this.studyData);
    }
  },
  watch: {
    studyData(n, o) {
      // 将已上传的学习数据 分类型
      if (!n) return;
      this.handleShowData(n);
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    baseFileUrl() {
      const { query } = this.$route;
      return `stutasks/userID_${this.studentInfo? this.studentInfo.userID : this.userInfo.userID}/currNo_${this.currNo}`; ///taskID_${this.titem.taskID}
    },
    taskJson() {
      return {
        chooseNo: this.chooseNo,
        taskID:this.titem.taskID,
        currNo: Number(this.currNo),
        noInTask :this.thisIndex,
        taskName: this.titem.name,
      }
    }
  },
  methods: {
    // 将已提交的数据展示 如果文件列表是已经被解压过了 那么需要递归设置文件的类型和拼接url
    handleShowData(data) {
      if (!data && !data.length) return;
      if (data?.submitContent) {
        let newSubmitcontent = [];
        let SubmitContentTryToFormat = {};
        // if (this.isSetLink) {
        //   SubmitContentTryToFormat = data?.submitContent
        // } else {
        SubmitContentTryToFormat = data?.submitContent.data
        // }
        if (SubmitContentTryToFormat?.filePaths) {
          const baseFileUrl = '/files' + (SubmitContentTryToFormat.baseFileUrl || `/${this.baseFileUrl}`)
          SubmitContentTryToFormat.filePaths.forEach((item) => {
            // 用于保存的列表
            this.saveUseFileList.push(Object.assign({}, item));
            // 修复学习端解压文件后，没有保存文件的fileUrl。此处递归修复路径
            if (item.subFiles) this.fixFileNoFileUrl(item.subFiles, item.fileUrl, baseFileUrl)
            // 递归格式化好url
            if (item.subFiles) {
              // 记录递归好的列表
              let nSubFiles = [];
              item.subFiles.forEach((sitem) => {
                // 获取顶级文件的文件名
                // let nParentFileName = item.fileUrl.substring(0, item.fileUrl.lastIndexOf("."));
                nSubFiles.push(sitem);
              });
              item.subFiles = nSubFiles;
            }
            if (item.fileUrl.indexOf("http://") !== -1 || item.fileUrl.indexOf("https://") !== -1) {
              newSubmitcontent.push(item);
            } else newSubmitcontent.push(Video.urlFormat(item, baseFileUrl, true));
          });
          this.fileList = newSubmitcontent;
          this.$emit("handelUploadedData", this.saveUseFileList);
        }
      }
    },
    // 递归修复文件没有fileUrl
    fixFileNoFileUrl(arr, parentPath, baseFileUrl) {
      if (parentPath && [".rar",".zip",".RAR",".ZIP"].indexOf(parentPath.substring(parentPath.lastIndexOf('.'))) !== -1) parentPath = parentPath.replace(".rar", "").replace(".zip", "").replace(".RAR", "").replace(".ZIP", "")
      arr.forEach(item => {
        if (!item.fileUrl) item.fileUrl = parentPath + '/' + item.fileName 
        else return
        if (item.subFiles) this.fixFileNoFileUrl(item.subFiles, item.fileUrl) 
        else item.fileUrl = location(window) +  (baseFileUrl || ('/' + this.baseFileUrl)) + '/' + item.fileUrl
      })
    },
    // 删除文件
    handelDeleteFile(choseItem, choseIndex) {
      // debugger
      if (this.titemState == taskState['studied']) return;
      this.fileList = this.fileList.filter(
        (item, index) =>
          item.fileUrl != choseItem.fileUrl ||
          choseItem.$treeNodeId != item.$treeNodeId
      );
      this.saveUseFileList = this.saveUseFileList.filter(
        (item, index) => choseItem.fileUrl.indexOf(item.fileUrl) == -1
      );
      let isEncoded = this.studyData.submitContent.isEncoded || false;
      this.handleUploadDataChange(this.uploadData.baseFileUrl, isEncoded);
    },
    // 关闭预览引导文文件窗口
    handelclose() {
      this.amplify = false;
    },
    // 上传文件的数据改变
    handleUploadDataChange(baseFileUrl, isEncoded = false, noRequestSaveStudyData = false) {
      if (this.isSetLink) {
        this.$emit("uploadDataChange", {
          data: {
            baseFileUrl: baseFileUrl || `/${this.baseFileUrl}`,
            filePaths: this.saveUseFileList,
            showLink: this.studyData.submitContent?.data?.showLink || ''
          }
        }, noRequestSaveStudyData)
      } else {
        this.$emit("uploadDataChange", {
          data: {
            baseFileUrl: baseFileUrl || `/${this.baseFileUrl}`,
            filePaths: this.saveUseFileList,
          },
          isEncoded: isEncoded,
        }, noRequestSaveStudyData);
      }
    },

    // 解压文件
    async handleDecompression(node, item, index) {
      const filrUrl =
        item.fileUrl.indexOf("http://") !== -1 || item.fileUrl.indexOf("https://") !== -1 
          ? item.fileUrl.split(location(window))[1]
          : item.fileUrl;
      const res = await Decompression(filrUrl.substring(1), undefined); // this.isSetLink ? this.baseFileUrl:
      if (!res) return;

      let subFiles = [];
      // let nUseBaseFileUrl = res.data.baseFileUrl.substring(0,res.data.baseFileUrl.lastIndexOf('/'))
      // 递归文件路径
      res.data.filePaths.forEach((fitem) => {
        // 解压文件的文件名就是url
        if (!fitem.fileUrl) fitem.fileUrl = fitem.fileName;
        subFiles.push(recursionFilePath(fitem, res.data.baseFileUrl, this));
      });
      // 将后端递归好的目录直接赋值给保存数据的文件
      this.saveUseFileList[index].subFiles = JSON.copyArray(res.data.filePaths);
      // 将递归后的文件格式设置给对应saveUseFileList索引文件的subFiles属性
      this.$set(item, "subFiles", subFiles);
      // 第一个解压的文件无法自动展开
      this.$nextTick(() => {
        node.expanded = true;
      });
      // 如果当前状态是批阅 则返回
      if (this.unShowGroupIcon) return;
      let nBaseFileUrl =
        this.studyData.submitContent?.data?.baseFileUrl ||
        this.uploadData?.data?.baseFileUrl || '/' + this.baseFileUrl;
      if (!nBaseFileUrl) {
        this.$antdMessage.warning({
          content: "无法获取文件根路径!",
        });
        return;
      }

      let isEncoded = this.studyData?.submitContent.isEncoded || false;
      // 解压文件后自动保存学习数据
      this.handleUploadDataChange(nBaseFileUrl, isEncoded);
    },

    // 格式化视频链接
    formatVideoUrl(address) {
      // debugger;
      let videoName = address.substring(address.lastIndexOf("/") + 1);
      return {
        fileUrl: address,
        fileName: videoName,
        isDir: false,
      };
    },
    // 点击节点
    handleClickNode(e, node, data) {
      // if (this.taskCommitJson.state === '已学') return
      if (data.isDir) return;
      const isFindIndex = true
      handelItem(node, data, this, isFindIndex);
    },
    // 文件上传成功后
    fileDataUploadSuccess(baseFileUrl, data, nFomartData, noRequestSaveStudyData) {
      if (this.isSetLink) {
        this.fileList = [data]
        this.saveUseFileList = [nFomartData]
        this.handleDecompression({}, data, 0)
        return
      } else {
        this.fileList.push(data)
        this.saveUseFileList.push(nFomartData)
      }
      //归档类型。
      let bFileUrl= '/' + this.baseFileUrl
      if(this.isArchive && baseFileUrl){
        // 归档类型的/files不需要保存到学习数据中
        bFileUrl = baseFileUrl.replace('/files', '')
      }
      this.handleUploadDataChange(bFileUrl, false, this.isArchive ? false : noRequestSaveStudyData)
      if (noRequestSaveStudyData) this.$store.dispatch("stuShow/fetchStuShowListByUserID", {userID: this.userInfo.userID});
    },
    // 发送事件给taskType_N组件，触发保存学习数据
    sendEmitToTaskTypeHandleSubmitData() {
      // 非设置连接任务才自动保存
      if(!this.isSetLink && !this.isArchive) this.handleUploadDataChange('/' + this.baseFileUrl, false, false)
    },
    // 文件已上传过
    uploadedBefore(data) {
      const nObj = Video.urlFormat(
        Object.assign({}, data.fileObj),
        "/" + this.baseFileUrl
      );
      this.fileList.push(nObj)
      this.saveUseFileList.push(data.fileObj)
      this.handleUploadDataChange('/' + this.baseFileUrl, false)
    },
    // 解压文件
    decompression(node, data) {
      let findIndex = this.fileList.findIndex(
        (fitem) => fitem.$treeNodeId == node.data.$treeNodeId
      );
      this.handleDecompression(node, data, findIndex)
    },
    // 删除
    async remove(node, data) {
      const parent = node.parent;
      const subFiles = parent.data.subFiles || parent.data;
      const index = subFiles.findIndex((d) => d.$treeNodeId === data.$treeNodeId);
      let findFileUrl = this.saveUseFileList[index]?.fileUrl
      if (!findFileUrl) {
        findFileUrl = data.fileUrl.substring(data.fileUrl.lastIndexOf("/") + 1);
      }
      let baseFileUrl = this.baseFileUrl;
      const params = {
        fileOrFolderName: findFileUrl,
        currNo: Number(this.currNo),
        // isStuShow: true,
        baseFileUrl: baseFileUrl,
        subPath: baseFileUrl
      };
      const res = await deleteFile(params);
      if (res.errno === 0) {
        subFiles.splice(index, 1);
        this.handelDeleteFile(data)
        this.$antdMessage.success({content: '删除成功!'})
      } else {
        this.$antdMessage.error({
          content: res.message || "删除失败!",
        });
      }
    },
    // 下载文件
    downLoad(node, data) {
      const url = this.getCompleteFileUrl(data.fileUrl)
      window.open(url)
      
      // var that=this;
      // that.loading = true;  //使用v-loading加载
      // var xhr = new XMLHttpRequest();
      // xhr.open('get', url, true);
      // xhr.responseType = "blob";  // 返回类型blob
      // // 定义请求完成的处理函数
      // xhr.onload = function () {
      //   // 请求完成
      //   if (this.status === 200) {
      //     // 返回200
      //     var blob = this.response;
      //     var reader = new FileReader();
      //     reader.readAsDataURL(blob);  // 转换为base64，可以直接放入标签href
      //     reader.onload = function (e) {
      //       // 创建一个a标签用于下载
      //       var a = document.createElement('a');
      //       // a.download = 'abc.txt'; //定义文件名称和文件类型
      //       a.href = e.target.result;
      //     }
      //   }
      // }
      // // 发送ajax请求
      // xhr.send();
    },
    // 移除url头部
    removeHttpUrl(url) {
      return url.replace('http://test.codelover.club', '').replace('https://test.codelover.club', '').replace('https://codelover.club', '').replace('https://www.codelover.club', '').replace('http://10.1.6.130', '')
    },
    handleNewDownLoad(node, data) {
      const notify = this.$notify({
        title: '极速下载中',
        message: `进度0%`,
        duration: 0
      });
      // directDownload(this.removeHttpUrl(data.fileUrl) ,data, this.userInfo.accessToken)
      rangeDownload(this.removeHttpUrl(data.fileUrl) ,data, this.userInfo.accessToken, notify)
    },
    // 复制
    handlecopy(node, data) {
      copy(this.getCompleteFileUrl(node.data.fileUrl))
    },
    // 获取完整的文件路径 对host、base路径拼接
    getCompleteFileUrl(fileUrl) {
      if(fileUrl.indexOf('http://') !== -1 || fileUrl.indexOf('https://') !== -1)
        return fileUrl
      // fileUrl的值为：/files/stutasks/userID_xx/currNo_xx/xxx
      return location(window)  + fileUrl
    },
  },
};
</script>


<style lang="stylus" >
.uploadComponent {

  .uploadFileTips {
    padding-top: 3px;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    color: #000;
  }

  // .custom-tree-node {
  //   height: 100%;
  //   overflow: hidden;
  //   display: block;
  //   text-align: left;
  //   width: 100%;
  // }

  .exhibition {
    padding: 16px 0;

    .pictureAndvideo {
      display: flex;
      flex-wrap: wrap;

      .uploadShowImgAndVideo {
        position: relative;
        min-width: 0;
        // min-width: 50px;
        // max-width: 70px;
        max-height: 50px;
        overflow: hidden;

        // .showImg {
        // max-width: 500px;
        // }
        img {
          border-radius: 5px;
          object-fit: cover;
          width: 50px;
          height: 50px;
        }

        .audio {
          max-width: 50px;
          position: relative;
          height: 50px;
          line-height: 0;
          background-color: rgba(126, 126, 126, 0.61);
          border-radius: 5px;
          overflow: hidden;
        }

        .audio::after {
          position: absolute;
          content: '';
          top: 50%;
          left: 50%;
          transform: translate(-30%, -50%);
          width: 0;
          height: 0;
          border-top: 13px solid transparent;
          border-left: 18px solid rgba(255, 255, 255, 0.93);
          border-bottom: 13px solid transparent;
          border-bottom-left-radius: 6px;
          border-top-left-radius: 6px;
        }

        .uploadVideo {
          position: relative;
          width: 70px;
          height: 50px;
          border-radius: 5px;

          // 隐藏所有控件
          video::-webkit-media-controls-enclosure {
            display: none;
          }

          video {
            object-fit: cover;
            outline: none;
            width: 70px !important;
            height: 50px !important;
          }
        }

        .uploadVideo::after {
          position: absolute;
          content: '';
          top: 50%;
          left: 50%;
          transform: translate(-30%, -50%);
          width: 0;
          height: 0;
          border-top: 13px solid transparent;
          border-left: 18px solid rgba(255, 255, 255, 0.93);
          border-bottom: 13px solid transparent;
          border-bottom-left-radius: 6px;
          border-top-left-radius: 6px;
        }

        .imgBox {
          margin-right: 10px;

          img {
            object-fit: cover;
          }
        }

        .audio {
          margin-right: 10px;
        }

        .uploadVideo {
          margin-right: 10px;
        }

        .deleteFile {
          position: absolute;
          right: 11px;
          top: 1px;
          width: 11px;
          height: 11px;
          border-radius: 50%;
          background: rgba(150, 150, 150, 0.32);
        }

        .deleteFile::before, .deleteFile::after {
          position: absolute;
          content: ' ';
          background: rgba(255, 255, 255, 0.17);
          left: 0;
          top: 0;
          width: 1px;
          height: 7px;
        }

        .deleteFile::before {
          transform: rotate(45deg) translate(5px, -2px);
        }

        .deleteFile::after {
          transform: rotate(-45deg) translate(2px, 5px);
        }

        .imgBox:hover + .deleteFile {
          background: #f23e3e;
        }

        .imgBox:hover + .deleteFile::before, .deleteFile::after {
          background: #ffffff;
        }

        .deleteFile:hover {
          background: #f23e3e;
        }

        .deleteFile:hover::before, .deleteFile:hover::after {
          background: #ffffff;
        }
      }
    }

    .file {
      text-align: left;

      p {
        margin: 0;
      }

      .fileNmaeListBox {
        // display: inline;
        width: fit-content;

        // .fileName {
        //   position: relative;
        //   padding: 3px 0;
        //   font-family: PMingLiU-ExtB;
        //   font-size: 14px;
        //   color: #629cd4;

        //   .deleteFile {
        //     position: absolute;
        //     right: -15px;
        //     top: 4px;
        //     width: 11px;
        //     height: 11px;
        //     border-radius: 50%;
        //     background: rgba(150, 150, 150, 0.32);
        //   }

        //   .deleteFile::before, .deleteFile::after {
        //     position: absolute;
        //     content: ' ';
        //     background: rgba(255, 255, 255, 0.17);
        //     left: 5px;
        //     top: 1.5px;
        //     width: 1px;
        //     height: 7px;
        //   }

        //   .deleteFile::before {
        //     transform: rotate(45deg);
        //   }

        //   .deleteFile::after {
        //     transform: rotate(-45deg);
        //   }

        //   .deleteFile:hover {
        //     background: #f23e3e;
        //   }

        //   .deleteFile:hover::before, .deleteFile:hover::after {
        //     background: #ffffff;
        //   }

        //   .decompression {
        //     margin-left: 10px;
        //     color: #000;
        //   }

        //   .decompression:hover {
        //     color: #629cd4;
        //   }
        // }

        // .fileName:hover {
        //   .deleteFile {
        //     background: #f23e3e;
        //   }
        // }

        // .fileName:hover {
        //   .deleteFile::before, .deleteFile::after {
        //     background: #ffffff;
        //   }
        // }
      }

      .excelTable {
        table {
          // margin: 0 auto;
          h4 {
            margin: 0;
          }

          tr {
            td {
              min-width: 20px;
              height: 21px;
            }
          }
        }
      }
    }
  }

  table {
    border-collapse: collapse;

    tr {
      td {
        border: 1px solid;
      }
    }
  }

  #video {
    vertical-align: bottom;
    outline: none;
    width: 100%;
    // height: 500px;
  }

  .audioPlayer {
    height: 62px;
    min-width: 300px;
  }

  .contentBox {
    line-height: 0;
  }

  .el-dialog__wrapper {
    .el-dialog {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 50px;
      background: transparent;
      box-shadow: none;

      .el-dialog__header {
        padding: 0;

        .el-dialog__headerbtn {
          top: 12px;
          right: 21px;

          .el-icon-close {
            transition: opacity 0.2s linear;
            opacity: 0;
          }

          .el-icon-close:before {
            font-size: 22px;
            font-weight: bold;
            color: #d12929;
          }
        }
      }

      .el-dialog__body {
        width: 100%;
        padding: 0;

        .contentBox {
          // width: 100%;
        }

        .showImg {
          image-rendering: -webkit-optimize-contrast;
          min-width: 10px;
          // width: 100% !important;
          max-width: 100%;
        }

        .audio {
          background-color: rgba(126, 126, 126, 0.61);
          border-radius: 5px;
        }
      }
    }
  }

  .el-dialog__wrapper:hover {
    .el-icon-close {
      opacity: 1 !important;
    }
  }
}

.studyUpload {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      min-height: 130px;
      height: auto;
      max-height: unset;
      border: solid 1px #707070;

      .el-icon-upload {
        position: relative;
        margin-top: 19px;
        margin-bottom: 4px;
        width: 55px;
        height: 55px;
        border-radius: 5px;
        border: 2px dashed #d2d6dc;
      }

      .el-icon-upload::before, .el-icon-upload::after {
        content: '';
        position: absolute;
        background: #d2d6dc;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .el-icon-upload::before {
        width: 45px;
        height: 3px;
      }

      .el-icon-upload::after {
        width: 3px;
        height: 45px;
      }

      .el-upload__text {
        div {
          margin-bottom: 3px
          line-height: 1;
          font-family: fangsong;
          font-weight: bold;
          font-size: 14px;
          color: #000;
        }
      }
    }

    .el-upload-dragger:hover {
      .el-icon-upload {
        border-color: #a2c2e4;
      }

      .el-icon-upload::after, .el-icon-upload::before {
        background: #a2c2e4;
      }
    }
  }

  .el-upload-list {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .uploadComponent {
  }

  .studyUpload {
    .el-upload {
      .el-upload-dragger {
        .el-icon-upload {
          margin-top: 30px;
        }

        .el-upload__text {
          display: none;
        }
      }
    }
  }
}
</style>